<script setup>
// #region 引入包, 函数和组件
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router"; // 路由信息
import Loading2 from "@/components/Loading2.vue"; // 加载中组件
import getInterface from "@/api"; // get请求函数
import FilmList from "./components/filmList.vue"; // 轮播图, 电影描述组件
import TimeSwitch from "@/components/TimeSwitch.vue"; // 时间切换组件
import ScheduleList from "./components/scheduleList.vue"; // 票组件
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const route = useRoute(); // 使用路由信息
const router = useRouter(); // 路由实例
// #endregion

// #region // 变量
const loading = ref(false); // 加载中组件 显示隐藏控制器
const filmId = ref(0); // 电影的id
const cinemaId = ref(0); // 电影院的id
const time = ref(0); // 时间场次
const cinemaInfo = ref(null); // 影院信息
const isShowTagsDetail = ref(false); // 是否展示标签详情
const film_list = ref(null); // 影院播放的电影列表
const current_film_index = ref(-1); // 当前展示的电影下标
const current_time_index = ref(-1); // 当前时间下标
const times = ref(null); // 当前电影的所有时间安排
const schedule_list = ref(null); // 当前票列表
// #endregion

// #region // 函数
// 获取影院详情
const getCinemaDetail = async () => {
  try {
    loading.value = true; // 加载中

    // 影院信息
    const res = await getInterface({ cinemaId: cinemaId.value }, "cinema.info");
    // console.log(res.data.data.cinema);
    cinemaInfo.value = res.data.data.cinema;
    // console.log(cinemaInfo.value);

    // 获取影院中的将要播出的电影详情
    const res1 = await getInterface({ cinemaId: cinemaId.value }, "film.cinema-show-film");
    // console.log(res1.data.data);
    film_list.value = res1.data.data.films;

    // 初次确定显示的电影是哪一个
    if (filmId.value) {
      // 如果有传电影Id参数, 在获取到的电影列表中查找对应的下标
      current_film_index.value = film_list.value.findIndex((v) => v.filmId == filmId.value);
      // 如果没有找到对应的下标, 赋值为0
      if (current_film_index.value === -1) current_film_index.value = 0;
    } else {
      current_film_index.value = 0;
    }

    // 获取时间列表
    times.value = film_list.value[current_film_index.value].showDate;
    times.value = times.value.map((v) => {
      // 重置格式
      return {
        showDate: v,
      };
    });
    // 初次确定显示哪一天的票
    if (time.value) {
      // 如果传入了时间的参数, 在时间列表中查找对应的下标
      current_time_index.value = times.value.findIndex((v) => v.showDate == time.value);
      // 如果没有找到对应的下标, 赋值为0
      if (current_time_index.value === -1) current_time_index.value = 0;
    } else {
      current_time_index.value = 0;
    }
    loading.value = false;
    // 拿到票的详情
    getScheduleList();
  } catch (error) {
    loading.value = false;
    // console.log(error);
  }
};
const showTags = (e) => {
  isShowTagsDetail.value = true;
  e.target.parentNode.scrollTop = 0;
};
const changeIndex = (swiper) => {
  // console.log(swiper.activeIndex);
  current_film_index.value = swiper.activeIndex;
  current_time_index.value = 0;
};
// 获取票详情
const getScheduleList = async () => {
  try {
    loading.value = true;
    const res = await getInterface(
      { filmId: filmId.value, cinemaId: cinemaId.value, date: time.value },
      "schedule.list"
    );
    // console.log(res.data.data);
    if (!res.data.data) return (loading.value = false);
    schedule_list.value = res.data.data.schedules;
    // console.log(schedule_list.value);
    loading.value = false;
  } catch (error) {
    loading.value = false;
    // console.log(error);
  }
};
// #endregion

// #region // 生命周期和vue函数
// 监听路由信息
watch(
  () => route.params,
  () => {
    if (route.params) {
      // 一开始拿到影院id (其他可有可无)
      ({ filmId: filmId.value, cinemaId: cinemaId.value, time: time.value } = route.params);
      // console.log("filmId", filmId.value, "cinemaId", cinemaId.value, "time", time.value);
      getCinemaDetail(); // 初始调接口拿到影院详情
    }
  },
  { immediate: true, once: true }
);
watch([current_time_index, current_film_index], (newVal) => {
  times.value = film_list.value[newVal[1]].showDate.map((v) => {
    return {
      showDate: v,
    };
  });
  time.value = times.value[newVal[0]].showDate;
  filmId.value = film_list.value[newVal[1]].filmId;
  router.replace({
    name: "cinemadetail",
    params: { filmId: filmId.value, time: time.value },
  });
  // 调接口
  getScheduleList();
  // console.log(111);
});
// #endregion
</script>

<template>
  <div class="cinema_detail" :style="isShowTagsDetail ? 'overflow:hidden;' : ''">
    <header>
      <i @click="router.back" v-if="!isShowTagsDetail">&lt;</i>
      <i @click="isShowTagsDetail = false" class="times" v-else>&times;</i>
    </header>

    <h3>{{ cinemaInfo?.name }}</h3>

    <div v-show="schedule_list" v-if="!isShowTagsDetail" class="cinema_tags" @click="showTags">
      <p v-for="tag in cinemaInfo?.services" :key="tag.name">{{ tag.name }}</p>
      <span>&gt;</span>
    </div>

    <div v-show="schedule_list" v-else class="cinema_tags_detail">
      <ul class="tags">
        <li v-for="item in cinemaInfo?.services" :key="item.name">
          <p>
            <span>{{ item.name }}</span>
          </p>
          <strong>{{ item.description }}</strong>
        </li>
      </ul>
    </div>

    <div class="address">
      <i class="map">
        <svg
          t="1749434840435"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8915"
          width="200"
          height="200"
        >
          <path
            d="M512 65c-162.7 0-295 132.3-295 295 0 156 266.8 572.1 278.2 589.8 3.7 5.7 10 9.2 16.8 9.2s13.1-3.5 16.8-9.2C540.2 932.1 807 516 807 360c0-162.6-132.3-295-295-295z m0 836.4C452.7 806.3 257 483.1 257 360c0-140.6 114.4-255 255-255s255 114.4 255 255c0 123.1-195.7 446.3-255 541.4z"
            fill="#3E3A39"
            p-id="8916"
          ></path>
          <path
            d="M512 231.4c-70.9 0-128.6 57.7-128.6 128.6 0 70.9 57.7 128.6 128.6 128.6S640.6 431 640.6 360c0-70.9-57.7-128.6-128.6-128.6z m0 217.2c-48.8 0-88.6-39.7-88.6-88.6 0-48.8 39.7-88.6 88.6-88.6 48.9 0 88.6 39.7 88.6 88.6 0 48.9-39.8 88.6-88.6 88.6z"
            fill="#3E3A39"
            p-id="8917"
          ></path>
        </svg>
      </i>
      <span>{{ cinemaInfo?.address }}</span>
      <a :href="'tel:' + cinemaInfo?.phone">
        <i class="tel">
          <svg
            t="1749435083991"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4326"
            width="200"
            height="200"
          >
            <path
              d="M0.73451 216.631062c0.511265-33.232257 4.090124-60.329328 17.383026-85.892603 4.090124-7.668982 9.202779-15.337965 15.337965-21.47315 17.383027-18.405558 34.766053-36.29985 52.660345-54.194142 19.939354-19.939354 42.435036-36.811115 69.020842-47.036425 21.473151-8.180248 43.457567-10.22531 65.953248-5.623921 29.653398 5.62392 53.682876 20.961885 75.156027 40.90124 32.209726 29.653398 57.261735 64.930717 79.246151 102.764363 11.759106 20.45062 19.939354 41.92377 23.518213 64.930717 5.112655 33.232257-2.045062 63.908186-22.495682 90.493992-15.337965 19.939354-32.720991 37.833646-50.104018 55.727939-6.646451 6.646451-7.668982 12.270372-4.601389 20.961885 7.157717 21.984416 18.916823 41.412505 32.720991 59.306797 19.428089 25.052009 40.389974 49.592753 61.863124 73.62223 20.961885 23.518213 42.946301 45.502629 64.930718 67.487045 16.360496 15.84923 32.720991 31.69846 50.104018 46.52516 31.187195 26.585806 62.885655 53.682876 100.719301 70.554637 6.646451 3.067593 14.315434 5.112655 21.473151 6.646452 2.556327 0.511265 6.646451-1.533796 8.691513-3.578859 9.714044-9.202779 18.916823-18.916823 28.630868-28.630867 13.804168-13.292903 28.630867-26.07454 45.502628-34.254788 21.984416-10.736575 44.991363-15.337965 70.043372-12.270372 30.675929 3.578858 57.773 15.337965 82.82501 32.209726 21.984416 14.315434 42.946301 29.653398 63.396921 46.52516 23.518213 18.916823 42.946301 41.92377 56.239204 69.532106 9.714044 19.939354 14.315434 40.901239 12.270371 63.396921-2.556327 28.630867-13.804168 54.705407-32.209725 76.689824-17.894292 20.961885-36.811115 40.901239-56.239204 60.329328-12.781637 12.270372-24.540744 25.563275-41.412505 34.254788-15.337965 7.668982-31.187195 13.292903-48.058956 14.826699-11.247841 1.022531-23.006947 3.067593-34.766054 2.556327-23.518213-1.533796-47.547691-4.090124-70.554637-8.180248-37.322381-7.157717-73.110965-19.428089-107.877019-34.254788-34.254788-14.826699-67.487045-30.675929-98.674239-50.615283-25.052009-15.84923-50.104018-31.187195-74.644762-48.058956-20.45062-13.804168-39.878708-29.142133-59.306797-44.480098-22.495682-18.405558-44.991363-37.322381-66.464514-57.261735-22.495682-20.45062-44.480098-41.92377-65.953248-63.396921-17.894292-17.894292-34.766053-37.322381-51.126549-56.239204-27.608336-32.720991-55.216673-65.953248-78.734885-102.253098-19.939354-30.675929-39.878708-61.863124-58.284266-93.561584-24.540744-42.946301-44.991363-88.44893-58.795532-135.996621C10.959819 305.079992 5.847164 280.027983 1.245775 254.975974c0-15.84923 0-29.653398-0.511265-38.344912z m69.020841-4.090124c0.511265 9.202779 0 17.894292 2.045062 27.097071 4.601389 23.006947 9.202779 46.013894 15.84923 67.99831 11.759106 40.389974 29.142133 78.734886 49.592753 115.546001 12.781637 23.006947 25.563275 45.502629 39.878708 67.487045 24.029478 37.833646 50.104018 73.622231 79.757416 107.877018 20.961885 24.029478 41.412505 48.058956 63.396921 71.065903 20.961885 21.984416 42.946301 41.92377 64.930717 62.885656 13.292903 12.270372 27.097071 24.540744 41.412505 36.299849 26.585806 20.961885 53.171611 42.435036 81.291213 62.37439 40.901239 28.630867 83.84754 54.194142 129.350169 75.156027 32.720991 15.337965 65.953248 28.630867 100.719302 37.322381 26.585806 7.157717 53.171611 11.759106 80.268682 11.247841 4.090124 0 7.668982-1.022531 11.759106-1.022531 16.360496-1.533796 32.209726-5.62392 43.457567-18.916823 3.578858-4.090124 7.668982-8.180248 11.759106-11.759106 22.495682-20.45062 44.480098-40.901239 60.329328-66.97578 8.691513-14.315434 12.270372-30.164664 6.135186-46.525159-4.601389-12.270372-11.759106-23.518213-20.961885-32.720992-12.781637-12.270372-26.07454-24.540744-39.367443-35.788584-20.45062-16.871761-42.435036-30.675929-66.464514-41.412505-24.540744-10.736575-47.036425-10.22531-67.487045 8.180248-16.871761 14.826699-32.720991 30.675929-49.081487 46.013894-1.533796 1.533796-3.578858 3.578858-5.62392 4.60139-15.84923 10.22531-32.209726 15.337965-51.126549 13.804168-18.405558-1.533796-35.788584-6.646451-52.14908-14.315434-32.720991-15.84923-62.37439-37.322381-89.982726-61.351859-24.029478-20.45062-48.058956-40.901239-70.554638-62.885655-25.052009-24.540744-49.081487-49.592753-73.110965-75.667293-16.871761-17.894292-32.720991-36.811115-48.058956-56.239204-19.939354-24.540744-37.833646-50.104018-51.126549-78.734885-9.714044-20.961885-15.84923-42.946301-12.781638-66.464514 2.045062-16.360496 8.180248-29.653398 19.939354-41.412505 14.826699-15.337965 30.164664-30.675929 44.480098-47.036425 10.22531-11.247841 17.894292-25.052009 15.337965-40.901239-2.556327-14.315434-7.668982-28.630867-13.804168-41.412505-10.736575-21.984416-25.052009-41.412505-40.90124-60.329328-13.804168-16.871761-28.119602-33.232257-46.525159-44.991363-12.270372-7.668982-25.563275-12.781637-40.389974-9.714044-20.45062 4.090124-36.29985 16.871761-51.126549 30.675929-14.315434 13.292903-27.608336 27.097071-41.412505 41.412505-6.646451 6.646451-13.804168 13.292903-17.894292 21.473151-10.22531 14.315434-11.759106 31.187195-11.759106 48.058956z"
              fill=""
              p-id="4327"
            ></path>
          </svg>
        </i>
      </a>
    </div>

    <film-list
      v-if="current_film_index + 1"
      :film_list
      :current_film_index
      @changeIndex="changeIndex"
    ></film-list>

    <div class="time_switch">
      <time-switch
        v-if="current_time_index + 1"
        :times
        v-model:curIndex="current_time_index"
      ></time-switch>
    </div>

    <schedule-list :schedule_list></schedule-list>

    <Loading2 :loading></Loading2>
  </div>
</template>

<style lang="scss" scoped>
@mixin nowrap($size) {
  font-size: $size;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.cinema_detail {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

header {
  height: 0.44rem;
  i {
    color: #666;
    position: fixed;
    font-size: 0.24rem;
    transform: scale(0.8, 1.4);
    z-index: 10; /* -------------------------- 10 返回按钮 */
    width: calc(0.3rem / 0.8);
    height: calc(0.3rem / 1.4);
    line-height: 0.18rem;
    text-align: left;
    padding-left: 0.08rem;
    top: 0.12rem;
  }
  .times {
    font-size: 0.28rem;
    transform: none;
  }
}

h3 {
  background: #fff;
  position: sticky;
  top: 0;
  left: 0;
  height: 0.44rem;
  color: var(--cl-blk);
  font-size: 0.17rem;
  text-align: center;
  line-height: 0.44rem;
  z-index: 9; /* ------------------------------- 9 h3 标题 */
}

.cinema_tags {
  height: 0.35rem;
  padding: 0.05rem 0 0.15rem 0;
  display: flex;
  justify-content: center;
  // background: #000;
  p {
    font-size: 0.1rem;
    margin: 0 0.025rem;
    border: 0.01rem solid #ffb232;
    color: #ffb232;
    padding: 0 0.05rem;
    line-height: 0.13rem;
    height: 100%;
    border-radius: 0.02rem;
    pointer-events: none;
  }
  span {
    font-size: 0.12rem;
    line-height: 0.14rem;
    transform: scale(0.8, 1.4);
    color: #ffb232;
    margin-left: 0.1rem;
    pointer-events: none;
  }
}

.cinema_tags_detail {
  position: fixed;
  top: 0.88rem;
  height: calc(100% - 0.88rem);
  width: 100%;
  background: #fff;
  z-index: 11; /* ------------------------------- 9 标签详情 */
  overflow: hidden;
  ul {
    padding: 0 0.3rem;
    opacity: 0;
    animation: tl 0.4s ease 0.2s forwards;
    li {
      display: grid;
      grid-template-columns: 0.7rem auto;
      min-height: 0.3rem;
      margin-bottom: 0.2rem;
      p {
        display: flex;
        align-items: start;
        span {
          font-size: 0.09rem;
          border: 0.01rem solid #ffb232;
          color: #ffb232;
          padding: 0.02rem 0.08rem;
          border-radius: 0.02rem;
          line-height: 0.09rem;
        }
      }
      strong {
        font-size: 0.12rem;
        line-height: 0.16rem;
        color: var(--cl-wh);
      }
    }
  }
}

.address {
  height: 0.5rem;
  padding-left: 0.17rem;
  display: flex;
  align-items: center;
  span {
    color: var(--cl-blk);
    max-width: 3rem;
    @include nowrap(0.14rem);
  }
  i {
    svg {
      width: 0.2rem;
      height: 0.2rem;
      display: flex;
      align-items: center;
      path {
        fill: var(--cl-blk);
      }
    }
  }
  .map {
    margin-right: 0.1rem;
  }
  a {
    margin-left: auto;
    margin-right: 0.17rem;
  }
}

.time_switch {
  height: 0.5rem;
}

@keyframes tl {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0.2rem);
    opacity: 1;
  }
}
</style>
